import React, { useEffect, useState } from "react";
import styles from './Header.module.css'
import logo from "../../assets/logo.svg";
import { Layout, Typography, Input, Menu, Button, Dropdown } from "antd";
import { GlobalOutlined } from "@ant-design/icons";
import { useParams, useNavigate, useLocation } from 'react-router-dom'
import { useAppDispatch, useSelector } from "../../redux/hooks";
import { useDispatch } from "react-redux";
import { changeLanguageActionCreator } from "../../redux/language/languageActions";
import { Dispatch } from "redux";
import { languageActionTypes } from '../../redux/language/languageActions'
import { useTranslation } from "react-i18next";
import { jwtDecode, JwtPayload as DefaultJwtPayload } from "jwt-decode"
import { userSlice } from "../../redux/user/slice";
import { languageSlice } from "../../redux/language/slice";

interface JwtPayload extends DefaultJwtPayload {
  username: string
}



export const Header: React.FC = () => {

  const navigate = useNavigate()
  const params = useParams()
  const location = useLocation()
  const language = useSelector(state => state.language.language)
  const languageList = useSelector(state => state.language.languageList)
  const dispatch = useAppDispatch()
  const { t } = useTranslation()

  const jwt = useSelector(state => state.user.token)
  const [username, setUsername] = useState("")

  const shoppingCartItems = useSelector(state => state.shoppingCart.items)
  const shoppingCartLoading = useSelector(state => state.shoppingCart.loading)


  useEffect(() => {
    if (jwt) {
      const token = jwtDecode<JwtPayload>(jwt)
      setUsername(token.username || '未命名')
    }
  }, [jwt])
  const onLogout = () => {
    dispatch(userSlice.actions.logOut())
    navigate('/')
  }
  
  const items = languageList.map(l => {
    return {
      key: l.code,
      label: l.name
    }
  })
  const handleMenuClick = (e: any) => {
    dispatch(languageSlice.actions.changeLanguage(e.key))
  }
  return (
    <div className={styles["app-header"]}>
      <div className={styles["top-header"]}>
        <div className={styles.inner}>
          <Typography.Text className={styles['text-title']}>{t('header.slogan')}</Typography.Text>
          <Dropdown.Button
            style={{ marginLeft: 15 }}
            menu={{ items, onClick: handleMenuClick }}
            icon={<GlobalOutlined />}
          >
            {language === 'en' ? 'English' : '中文'}
          </Dropdown.Button>
          {jwt ?
            <Button.Group className={styles["button-group"]}>
              <div className={styles["span-text"]}>
                <span>{t('header.welcome')}</span>
                <Typography.Text strong>{username}</Typography.Text>
              </div>
              <Button loading={shoppingCartLoading} onClick={()=> navigate('/shoppingCart')}>{t('header.shoppingCart')}({shoppingCartItems.length})</Button>
              <Button onClick={onLogout}>{t('header.signOut')}</Button>
            </Button.Group>
            :
            <Button.Group className={styles["button-group"]}>
              <Button onClick={() => navigate('/register')}>{t('header.register')}</Button>
              <Button onClick={() => navigate('/signin')}>{t('header.signin')}</Button>
            </Button.Group>

          }

        </div>
      </div>
      <Layout.Header className={styles["main-header"]}>
        <span onClick={() => navigate('/')}>
          <img src={logo} alt="logo" className={styles["App-logo"]} />
          <Typography.Title level={3} className={styles.title}>
            {t('header.title')}
          </Typography.Title>
        </span>

        <Input.Search
          placeholder="请输入旅游目的地、主题、或关键字"
          className={styles["search-input"]}
          onSearch={(keyword) => navigate("/search/" + keyword)}
        />
      </Layout.Header>
      <Menu
        mode={"horizontal"}
        className={styles["main-menu"]}
        items={[
          { key: "1", label: t("header.home_page") },
          { key: "2", label: t("header.weekend") },
          { key: "3", label: t("header.group") },
          { key: "4", label: t("header.backpack") },
          { key: "5", label: t("header.private") },
          { key: "6", label: t("header.cruise") },
          { key: "7", label: t("header.hotel") },
          { key: "8", label: t("header.local") },
          { key: "9", label: t("header.theme") },
          { key: "10", label: t("header.custom") },
          { key: "11", label: t("header.study") },
          { key: "12", label: t("header.visa") },
          { key: "13", label: t("header.enterprise") },
          { key: "14", label: t("header.high_end") },
          { key: "15", label: t("header.outdoor") },
          { key: "16", label: t("header.insurance") },
        ]}
      />
    </div>
  )
}